<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-button
          style="padding: 3px 0"
          type="primary"
          @click="dialogVisible = true"
          size="small"
          >新增</el-button
        >
      </div>
      <el-table :data="list" border style="width: 100%">
        <el-table-column
          fixed
          type="index"
          align="center"
          label="序号"
          width="50"
        >
        </el-table-column>
        <el-table-column prop="pic" align="center" label="广告图片" width="200">
          <template slot-scope="scope">
            <img
              :src="scope.row.pic"
              alt=""
              style="width: 100px; height: 100px"
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="startTime "
          align="center"
          label="时间"
          width="200"
        >
          <template slot-scope="scope">
            <p>开始时间:{{ scope.row.modifyTime }}</p>
            <p>结束时间:{{ scope.row.startTime }}</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          align="center"
          label="广告名称"
          width="150"
        >
        </el-table-column>
        <el-table-column
          prop="clickCount "
          label="点击数"
          align="center"
          width="150"
        >
        </el-table-column>
        <el-table-column
          prop="orderCount"
          label="下单数"
          align="center"
          width="150"
        >
        </el-table-column>
        <el-table-column
          prop="type"
          label="轮播位置"
          align="center"
          width="120"
        >
        </el-table-column>
        <el-table-column prop="url" label="链接地址" align="center" width="150">
        </el-table-column>
        <el-table-column prop="note" label="备注" align="center" width="120">
        </el-table-column>
        <el-table-column
          prop="status"
          label="上下线状态"
          align="center"
          width="120"
        >
        </el-table-column>
        <el-table-column fixed="right" align="center" label="操作" width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="edit(scope.row)"
              >编辑</el-button
            >
            <el-button
              type="text"
              size="small"
              style="color: red"
              @click="delslogan(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="75%"
        :before-close="handleClose"
      >
        <span>广告详情</span>

        <el-row :gutter="20">
          <el-col :span="12"
            ><div class="grid-content bg-purple">
              <el-form-item label="广告名称" prop="name">
                <el-input v-model="ruleForm.name"></el-input>
              </el-form-item></div
          ></el-col>
          <el-col :span="12"
            ><div class="grid-content bg-purple">
              <el-form-item label="备注">
                <el-input v-model="ruleForm.note"></el-input>
              </el-form-item></div
          ></el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12"
            ><div class="grid-content bg-purple">
              <el-form-item label="排序">
                <el-input v-model="ruleForm.sort"></el-input>
              </el-form-item></div
          ></el-col>
          <el-col :span="12"
            ><div class="grid-content bg-purple">
              <el-form-item label="产品数量">
                <el-input v-model="ruleForm.num"></el-input>
              </el-form-item></div
          ></el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12"
            ><div class="grid-content bg-purple">
              <el-form-item label="链接">
                <el-input v-model="ruleForm.url"></el-input>
              </el-form-item></div
          ></el-col>
          <el-col :span="12"
            ><div class="grid-content bg-purple">
              <el-form-item label="轮播首页数据">
                <el-select v-model="ruleForm.type" placeholder="请选择活动区域">
                  <el-option label="app首页轮播" :value="0"></el-option>
                  <el-option label="其他" :value="1"></el-option>
                </el-select>
              </el-form-item></div
          ></el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12"
            ><div class="grid-content bg-purple">
              <div class="block">
                <span class="demonstration">开始时间</span>
                <el-date-picker
                  v-model="ruleForm.startTime"
                  type="date"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </div></div
          ></el-col>
          <el-col :span="12"
            ><div class="grid-content bg-purple">
              <div class="block">
                <span class="demonstration">结束时间</span>
                <el-date-picker
                  v-model="ruleForm.endTime"
                  type="date"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </div></div
          ></el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12"
            ><div class="grid-content bg-purple">
              <el-form-item label="上下线状态">
                <el-switch
                  v-model="ruleForm.status"
                  @change="disable(ruleForm.status)"
                ></el-switch>
              </el-form-item></div
          ></el-col>
          <el-col :span="12"
            ><div class="grid-content bg-purple">
              <el-upload
                class="upload-demo"
                action="/lejuAdmin/material/uploadFileOssSave"
                :headers="headers"
                :on-success="handleChange"
                ref="lim"
                :file-list="fileList"
              >
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">
                  只能上传jpg/png文件，且不超过500kb
                </div>
              </el-upload>
            </div>
            <img
              :src="ruleForm.pic"
              alt=""
              style="width: 100px; height: 100px"
            />
          </el-col>
        </el-row>

        <span slot="footer" class="dialog-footer">
          <el-button @click="delclose">取 消</el-button>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </el-form>
  </div>
</template>

<script >
import { adsList, addAds, updateAds, delAds } from "@/api/myd/index";
import { getToken } from "@/utils/myAuth";
export default {
  data() {
    return {
      rules: {
        name: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
      }, //验证表单
      fileList: [], //照片存储
      list: [], //数据列表
      dialogVisible: false, //关闭弹框
      //   from表单
      ruleForm: {
        clickCount: "", //点击数
        createTime: "", //创建时间
        endTime: "", //广告结束时间
        id: "",
        modifyTime: "", //更新时间
        name: "", //""
        note: "", //备注
        orderCount: "", //下单数
        pic: "", //图片url
        productId: "", // 商品id
        sort: "", //排序
        startTime: "", //广告开始时间
        status: "", //上下线状态：0->下线；1->上线
        type: "", //轮播位置：0->app首页轮播
        url: "", //链接地址
        num: "",
      },
      able: true, //根据状态看是否更新
    };
  },
  created() {
    this.adsListAPI();
  },
  components: {},

  computed: {
    headers() {
      return { token: getToken() };
    },
  },

  mounted() {},

  methods: {
    //   编辑广告
    edit(row) {
      this.able = false;
      row.status == 1 ? true : false;
      //   row.num = "";
      this.ruleForm = row;
      this.dialogVisible = true;
    },
    //点击事件
    disable(el) {
      if (el == true) {
        this.ruleForm.status = 1;
      } else {
        this.ruleForm.status = 0;
      }
      console.log(el);
    },
    //   表单提交验证
    submitForm(formName) {
      console.log(this.ruleForm);
      var _this = this;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("是否提交");
          if (_this.able == true) {
            addAds(_this.ruleForm).then((res) => {
              console.log(res);
              if (res.success) {
                _this.dialogVisible = false;
                _this.$message.success("提交成功");
                _this.adsListAPI();
                this.$data.ruleForm = this.$options.data().ruleForm;
              } else {
                _this.$message.error("提交失败");
              }
            });
          } else {
            updateAds(_this.ruleForm).then((res) => {
              if (res.success) {
                _this.dialogVisible = false;
                _this.able == true;
                _this.$message.success("提交成功");
                _this.adsListAPI();
                this.$data.ruleForm = this.$options.data().ruleForm;
              } else {
                _this.$message.error("提交失败");
              }
            });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //图片上传
    handleChange(file, fileList) {
      var _this = this;
      console.log(file);
      if (file.code == 20000) {
        this.$message.success("上传成功");
        _this.ruleForm.pic = file.data.material.ossUrl;
      } else {
        this.$message.error("对不起选择失败请重新上传");
      }
      console.log(file.data.fileUrl, "file");
    },
    //   弹框事件
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
          this.able = true;
          this.$data.ruleForm = this.$options.data().ruleForm;
        })
        .catch((_) => {});
    },
    // 弹框关闭
    delclose() {
      this.able = true;
      this.$data.ruleForm = this.$options.data().ruleForm;
      this.dialogVisible = false;
    },
    adsListAPI() {
      var _this = this;
      adsList().then((res) => {
        console.log(res);
        if (res.success) {
          res.data.items.forEach((element) => {
            element.num = "";
          });
          _this.list = res.data.items;
        } else {
          _this.$message.error("获取失败");
        }
      });
    },
    delslogan(row) {
      var _this = this;
      delAds(row.id).then((res) => {
        console.log(res);
        if (res.success) {
          _this.$message.success("删除成功");
          _this.adsListAPI();
        } else {
          _this.$message.error("删除失败");
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.box-card {
  margin: 30px;
}
</style>